<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>教练详情</title>

    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" href="../css/flexible.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="./privateLessons.css">
    <link rel="stylesheet" href="../css/flex.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css">

    <script src="../js/vue/vue.js"></script>
    <script src="../js/vue/axios.js"></script>
    <script src="../js/vue/MD5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src="../js/vue/qs.js"></script>

    <style>
        .bottomScr {
            overflow-y: scroll;
            height: calc(100vh - 2.67rem);
        }

        .carinfo {
            margin-left: 0.17rem;
            margin-top: 0.1rem;
            font-size: 0.14rem;
            color: #666666;
        }

        .cardzc {
            color: #083D89;
        }

        .cardsx {
            color: red;
        }
    </style>
</head>

<body>

    <div id="app">

        <div flex="main:left cross:center" style="height: 0.84rem;">

            <div>
                <img style="height: 0.52rem;width: 0.52rem;border-radius:50%;margin-left: 0.15rem;"
                    :src="this.jlInfo.Picurl">
            </div>

            <div flex="dir:top main:justify cross:top" style="margin-left: 0.1rem;height: 0.44rem;">
                <div style="font-size: 16px;">
                    <b>{{jlInfo.Sname}}</b>
                </div>
                <div style="color: #999999;font-size: 12px;">
                    预约日期：{{dateInfo.time}}&nbsp;星期{{dateInfo.week}}&nbsp;|&nbsp;课程时长：{{Chour}}分钟</div>

            </div>
        </div>

        <div class="h10 mg"></div>
        <!-- 选择预约开始时间 -->
        <div style="height: 0.93rem;">
            <div style=" display: flex;flex-direction:row;align-items:center; margin-top: 0.16rem;">
                <div
                    style="background-color: #1778FF; height: 8px; width: 8px; border-radius:4px; margin-left: 0.15rem;">
                </div>

                <div style="font-size: 14px; color: #333333;margin-left: 0.04rem;">
                    选择预约开始时间
                </div>
            </div>
            <div style="height: 5px;"></div>
            <div v-on:click="clickShowTimeSelect" flex="dir:left main:justify cross:center"
                style="margin-left: 0.15rem;margin-right: 0.15rem;  margin-top: 0.1rem; height: 0.35rem; border-radius:0.175rem; border-width:thin;border-style:solid;border-color:#1778FF;">
                <div style="margin-left: 0.18rem;font-size: 12px;color: #999999;">
                    {{selectTime.length > 1?dateInfo.time+" "+selectTime:"请选择时间"}}
                </div>
                <div style="margin-right: 0.18rem;">
                    <img src="../images/dateim.svg">
                </div>
            </div>
        </div>

        <van-popup v-model="dateshow" position="bottom">
            <van-picker show-toolbar title="请选择时间" @confirm="onConfirm" @cancel="dateshow = false" :columns="columns" />
        </van-popup>


        <div class="h10 mg"></div>

        <div style="height: 0.38rem;">
            <div style=" display: flex;flex-direction:row;align-items:center; margin-top: 0.16rem;">
                <div
                    style="background-color: #1778FF; height: 8px; width: 8px; border-radius:4px; margin-left: 0.15rem;">
                </div>
                <div style="font-size: 14px; color: #333333;margin-left: 0.04rem;">
                    选择扣费方式
                </div>
            </div>
        </div>
        <div class="bottomScr">

            <div v-for="item in card_list">
                <div v-on:click="clickCard(item)" flex="dir:left main:left cross:top"
                    style="height: 1.5rem; margin-left: 0.15rem; margin-right: 0.15rem; background-image:url(../images/cardBga.png);background-size:100% 100%;">
                    <div style="margin-left: 0.17rem; margin-top: 0.20rem;">
                        <img v-if="item.is_yy == 1 || item.start != 1" src="../images/cantSelect.svg">
                        <img v-else-if="item.select" src="../images/cardSelect.svg">
                        <img v-else src="../images/cardnoSelect.svg">
                    </div>
                    <div>
                        <div style="margin-left: 0.17rem; margin-top: 0.20rem; width: calc(100vw - 1rem);"
                            flex="dir:left main:justify">
                            <div style="font-size: 0.14rem; color: #333333;">
                                <b>{{item.Cardname}}</b>
                            </div>
                            <div :class="{'cardzc':item.start == 1 ,'cardsx': item.start != 1}"
                                style="font-size: 0.14rem;">
                                {{item.start == 1?"正常":"失效"}}
                            </div>
                        </div>
                        <div class="carinfo" v-if="item.start == 1">
                            <!-- 卡类型 10期限 20次数 30储值 50私教课70计时卡	 -->
                            余额：{{item.Surplus}}{{item.Cardtype == 30?"元":"次"}}
                        </div>
                        <div class="carinfo" v-else>
                            <!-- 卡类型 10期限 20次数 30储值 50私教课70计时卡	 -->
                            余额：{{item.Surplus}}
                        </div>
                        <div class="carinfo">
                            入场：{{item.account}}
                        </div>
                        <div class="carinfo">
                            有效期限：{{item.time}}</b>
                        </div>
                    </div>
                </div>
                <div style="height: 0.1rem;"></div>
            </div>
            <div flex="main:center cross:center" style="height: 0.73rem;">
                <div flex="main:center cross:center"
                    style="height: 0.33rem; width: 0.89rem;background-color: #1778FF; border-radius: 0.165rem; color: white;">
                    <div v-on:click="quyuyue()">
                        确认预约
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

<script>

    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            S: this.getMilliseconds(), //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(
                RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length)
            );
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(
                    RegExp.$1,
                    RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
                );
        return fmt;
    };

    var vm = new Vue({

        el: '#app',
        data: {
            dateInfo: {},  //日期信息
            kcInfo: {}, //课程信息
            jlInfo: {}, //课程信息
            Chour: "0",//课程市场
            timeCanSelectArr: [],
            dateshow: false,
            columns: [],
            selectTime: "", //选择的时间
            card_list: [],//卡片列表
            selectitem: null,
            timeSelectdisabled: false,
            timeSelectmsg: ""
        },

        created() {

            this.setCanS()

        },

        methods: {

            setCanS() {

                let Request = new Object()
                Request = GetRequest()
                let index = Request['index'];

                let ykdate = sessionStorage.getItem('ykdate');
                let listObj = sessionStorage.getItem("jlitem");


                if (index == undefined || ykdate == undefined || listObj == undefined) {
                    this.$toast('缺少必要信息')
                    return;
                }

                this.dateInfo = JSON.parse(ykdate);
                this.jlInfo = JSON.parse(listObj);
                this.kcInfo = this.jlInfo.class[index];
                
                this.getlist()

            },


            getlist() {

                // window.vant.Toast.loading({
                //     mask: true,
                //     message: '加载中...'
                // });

                let params = {
                    // vid: "",
                    date: this.dateInfo.time,
                    Tid: this.kcInfo.id,
                    Coach_id: this.jlInfo.id
                }
                console.log(params);
                getVs()
                var that = this;

                axios.post('/mobileapi/member/curriculum_p.php?act=sj_list', Qs.stringify(params)).then(function (response) {
                    window.vant.Toast.clear();
                    let { data, code } = response.data
                    if (code !== 200) {
                        window.vant.Toast.fail(msg)
                    } else {
                        // console.log(data.useTime.Chour);
                        that.Chour = data.useTime.Chour;
                        that.reloadCanSelectTime(data.useTime);
                        var array = data.card_list;
                        for (let index = 0; index < array.length; index++) {
                            const element = array[index];
                            element.select = false;
                        }
                        array.sort(function (a, b) {
                            return a.is_yy - b.is_yy;
                        });
                        console.log(array);
                        that.card_list = array;
                        var uid = response.data.Uid;

                        sessionStorage.setItem("uid", uid)

                    }

                }).catch(function (error) {
                    window.vant.Toast.clear();
                    console.log(error);

                });

            },
            //处理可以约课时间

            reloadCanSelectTime(res) {
                console.log(res);
                let data = res;
                if (data.am.workams == 0 && data.pm.workpms == 0) {
                    //今天不上班
                    this.timeSelectdisabled = true;
                    this.timeSelectmsg = "该教练今日休息";
                    return;
                }
                //课程时长 (转化成秒)
                let chours = data.Chour * 60;
                //判断时间是不是今天
                var currDate = new Date();
                //0.初始化数组
                var amarr = [];
                var pmarr = [];
                var xbtimes = 0;
                if (data.am.workams != 0) {
                    amarr.push(data.am.workams, data.am.workame);
                    xbtimes = data.am.workame;
                }
                if (data.pm.workpms != 0) {
                    pmarr.push(data.pm.workpms, data.pm.workpme);
                    xbtimes = data.pm.workpme;
                }

                //0.1处理今日逻辑
                if (this.dateInfo.time == currDate.format("yyyy-MM-dd")) {

                    //获取当前时间戳
                    let currtimes = Math.round(currDate / 1000);

                    if (currtimes > xbtimes) {
                        //判断全天下班
                        this.timeSelectdisabled = true;
                        this.timeSelectmsg = "该教练今日已下班";
                        return;
                    }

                    if (pmarr.length > 1 && currtimes < pmarr[1] && currtimes > pmarr[0]) {
                        //当前时间在下午
                        pmarr[0] = currtimes;
                        amarr = [];
                    } else if (amarr.length > 1 && currtimes < amarr[1] && currtimes > amarr[0]) {
                        //当前时间在上午
                        amarr[0] = currtimes;
                    }
                }

                //1.将已经约的时间插入上午下午上下班时间
                for (let index = 0; index < data.plan_new.length; index++) {
                    const element = data.plan_new[index];
                    console.log(element);
                    let Sdate = Number(element.Sdate);
                    let Edate = Number(element.Edate);
                    console.log(pmarr.length > 1);
                    if (pmarr.length > 1 && Sdate <= pmarr[1] && Sdate >= pmarr[0] || (Sdate <= pmarr[0] && Edate >= pmarr[0])) {

                        if ((Edate <= pmarr[1] && Sdate <= pmarr[0])) {
                            pmarr.push(pmarr[0], Edate);
                        } else {
                            //当前课程在下午
                            pmarr.push(Sdate, Edate);
                        }
                    } else if (amarr.length > 1 && Sdate <= amarr[1] && Sdate >= amarr[0] || (Sdate <= amarr[0] && Edate >= amarr[0])) {
                        if ((Edate <= amarr[1] && Sdate <= amarr[0])) {
                            amarr.push(amarr[0], Edate);
                        } else {
                            //当前课程在上去
                            amarr.push(Sdate, Edate);
                        }

                    }
                }
                //2.给数组排序
                amarr.sort();
                pmarr.sort();
                console.log("amarr");
                console.log(amarr);

                var skTimeArr = [];
                //寻找上课时间
                if (amarr.length > 1) {
                    var beginTime = 0;
                    for (let index = 0; index < amarr.length; index++) {
                        const element = amarr[index];
                        //单数为开始时间 双数为截止时间 数组一定是偶数个
                        if (index % 2 == 0) {
                            //单数
                            beginTime = element;
                        } else {
                            //偶数个
                            if (element - beginTime >= chours) {
                                //当前时间段可约
                                skTimeArr.push(beginTime, element - chours);
                            }
                        }
                    }
                }

                if (pmarr.length > 1) {
                    var beginTime = 0;
                    for (let index = 0; index < pmarr.length; index++) {
                        const element = pmarr[index];
                        //单数为开始时间 双数为截止时间 数组一定是偶数个
                        if (index % 2 == 0) {
                            //单数
                            beginTime = element;
                        } else {
                            //偶数个
                            if (element - beginTime >= chours) {
                                //当前时间段可约
                                skTimeArr.push(beginTime, element - chours);
                            }
                        }
                    }
                }
                skTimeArr.sort();

                //转化格式
                var keyuedic = {};


                if (skTimeArr.length > 0) {
                    var beginTime = 0;
                    for (let index = 0; index < skTimeArr.length; index++) {
                        const element = skTimeArr[index];
                        if (index % 2 == 0) {
                            //单数
                            beginTime = element;
                        } else {
                            var date1 = new Date(beginTime * 1000);
                            var date2 = new Date(element * 1000);
                            let beginTimeH = date1.format("hh");
                            let beginTimeM = date1.format("mm");
                            let endTimeH = date2.format("hh");
                            let endTimeM = date2.format("mm");
                            if (beginTimeH === endTimeH) {
                                //在一个小时内
                                var minArr;
                                var bdickey = beginTimeH.toString();
                                if (bdickey.length == 1) {
                                    bdickey = "0" + bdickey;
                                }

                                if (keyuedic[bdickey] != undefined) {
                                    minArr = keyuedic[bdickey];
                                } else {
                                    minArr = [];
                                    keyuedic[bdickey] = minArr;
                                }

                                for (let index = beginTimeM; index <= endTimeM; index++) {
                                    var value = index.toString();
                                    if (value.length == 1) {
                                        value = "0" + value;
                                    }
                                    minArr.push(value);

                                }
                            } else {
                                var bminArr;

                                var bdickey = beginTimeH.toString();
                                if (bdickey.length == 1) {
                                    bdickey = "0" + bdickey;
                                }

                                if (keyuedic[bdickey] != undefined) {
                                    bminArr = keyuedic[bdickey];
                                } else {
                                    bminArr = [];
                                    keyuedic[bdickey] = bminArr;
                                }
                                for (let index = beginTimeM; index < 60; index++) {
                                    var value = index.toString();
                                    if (value.length == 1) {
                                        value = "0" + value;
                                    }
                                    bminArr.push(value);
                                }
                                //空闲时间大于1小时
                                if (endTimeH - beginTimeH > 1) {
                                    let beginar = parseInt(beginTimeH) + 1;
                                    for (let hour = beginar; hour < endTimeH; hour++) {
                                        var zminArr;

                                        var dickey = hour.toString();
                                        if (dickey.length == 1) {
                                            dickey = "0" + dickey;
                                        }

                                        if (keyuedic[dickey] != undefined) {
                                            zminArr = keyuedic[dickey];
                                        } else {
                                            zminArr = [];
                                            keyuedic[dickey] = zminArr;
                                        }
                                        for (let index = 0; index < 60; index++) {
                                            var value = index.toString();
                                            if (value.length == 1) {
                                                value = "0" + value;
                                            }
                                            zminArr.push(value);
                                        }
                                    }

                                }


                                var eminArr;

                                var dickey = endTimeH.toString();
                                if (dickey.length == 1) {
                                    dickey = "0" + dickey;
                                }

                                if (keyuedic[dickey] != undefined) {
                                    eminArr = keyuedic[dickey];
                                } else {
                                    eminArr = [];
                                    keyuedic[dickey] = eminArr;
                                }
                                for (let index = 0; index <= endTimeM; index++) {
                                    var value = index.toString();
                                    if (value.length == 1) {
                                        value = "0" + value;
                                    }
                                    eminArr.push(value);
                                }
                            }
                        }
                    }
                } else {
                    this.timeSelectdisabled = true;
                    this.timeSelectmsg = "该教练今日已约满";
                }
                //在处理

                var keyArr = Object.keys(keyuedic);
                keyArr.sort();
                var backArr = [];
                for (let index = 0; index < keyArr.length; index++) {
                    const element = keyArr[index];
                    let arr = keyuedic[element];
                    var valueArr = [];
                    for (let index = 0; index < arr.length; index++) {
                        const element = arr[index];
                        valueArr.push({ "text": element });
                    }
                    backArr.push({ "text": element, "children": valueArr });
                }
                this.columns = backArr;

            },

            onConfirm(value) {
                console.log(value);
                this.selectTime = value[0] + ":" + value[1];
                this.dateshow = false;
            },

            //点击卡片
            clickCard(item) {
                if (item.is_yy == 0) {
                    for (let index = 0; index < this.card_list.length; index++) {
                        const element = this.card_list[index];
                        element.select = false;
                    }
                    item.select = true;
                    this.selectitem = item;
                } else {
                    this.$toast(item.account)
                }

            },
            clickShowTimeSelect() {
                if (this.timeSelectdisabled) {
                    this.$toast(this.timeSelectmsg);
                    return;
                }
                this.dateshow = true;
            },
            quyuyue() {
                if (this.selectitem == null) {
                    this.$toast("请选择扣费方式");
                    return;
                }
                if (this.selectTime.length < 1) {
                    this.$toast("请选择预约开始时间");
                    return
                }
                let dates = this.dateInfo.time + " " + this.selectTime
                let tvid = localStorage.getItem("membervid");
                let tuid = sessionStorage.getItem("uid");

                let params = {
                    vid: tvid,
                    uid: tuid,
                    date: this.dateInfo.time,
                    Tid: this.kcInfo.id,
                    Coach_id: this.jlInfo.id,
                    Cid: this.selectitem.id,
                    Csid: this.selectitem.Csid,
                    date: dates
                }
                console.log(params);
                getVs()
                var that = this;

                axios.post('/mobileapi/member/curriculum_p.php?act=privateYY', Qs.stringify(params)).then(function (response) {
                    console.log(response)

                    let { data, code } = response.data
                    if (code !== 200) {
                        that.$toast(response.data.msg);
                        console.log(response.data.msg);
                    } else {
                        alert('预约成功')
                        window.history.go(-1);
                    }

                }).catch(function (error) {
                    window.vant.Toast.clear();
                    console.log(error);

                });
            }
        }

    })

</script>

</html>